<template>
  <div>
    <van-radio-group v-model="radioValue" :key="radioKey" @change="change">
      <template v-if="type === 1">
        <van-radio class="paragraph-p1-light radio-item" :name="item.value" v-for="(item, i) in radioItemList"
                   :key="'radioItem'+ i">
          {{ item.title }}
          <template #icon="props">
            <img class="icon-24" :src="props.checked ? activeIcon : inactiveIcon" alt=""/>
          </template>
        </van-radio>
      </template>
      <template v-if="type === 99">
        <van-radio class="paragraph-p1-light radio-item" name="991">
          自选时间段
          <template #icon="props">
            <img class="icon-24" :src="props.checked ? activeIcon : inactiveIcon" alt=""/>
          </template>
        </van-radio>
        <div class="pop-content-select">
          <div class="pop-content-select-part" @click="chooseTime(1)">
            <span>{{ beginTimeString }}</span>
            <img class="icon-16" src="@/static/icon/16px_arrow_down.png" alt=""/>
          </div>
          <div class="pop-content-select-part" @click="chooseTime(2)">
            <span>{{ endTimeString }}</span>
            <img class="icon-16" src="@/static/icon/16px_arrow_down.png" alt=""/>
          </div>
          <van-action-sheet v-model="ifShowTimeChoose">
            <van-datetime-picker class="margin-top-div-16"
                v-model="currentDate"
                type="date"
                title="选择年月日"
                :min-date="minDate"
                :max-date="maxDate"
                @confirm="onConfirm"
                @cancel="onCancel"
            />
          </van-action-sheet>
        </div>
        <van-radio class="paragraph-p1-light radio-item" name="992">
          全时段统计
          <template #icon="props">
            <img class="icon-24" :src="props.checked ? activeIcon : inactiveIcon" alt=""/>
          </template>
        </van-radio>
      </template>
    </van-radio-group>
  </div>
</template>
<script>
import SubtractChecked from '@/static/icon/radio/subtract-checked.png'
import SubtractUnchecked from '@/static/icon/radio/subtract-unchecked.png'
import TodoChecked from '@/static/icon/radio/20px_todo_checked.png'
import TodoUnchecked from '@/static/icon/radio/20px_todo_unchecked.png'

export default {
  name: "FieldRadio",
  props: {
    defaultRadio: {type: String, default: () => ('1')},
    type: {type: Number, default: () => 1},
    radioItemList: {type: Array, default: () => []},
  },
  components: {},
  mounted() {
    switch (this.type) {
      case 1:
        this.activeIcon = SubtractChecked
        this.inactiveIcon = SubtractUnchecked
        break
      case 2:
        this.activeIcon = TodoChecked
        this.inactiveIcon = TodoUnchecked
        break
    }
    if (this.type === 99) {
      this.radioValue = '991'
    }
  },
  data() {
    return {
      radio: this.defaultRadio,
      activeIcon: SubtractChecked,
      inactiveIcon: SubtractUnchecked,
      radioKey: new Date().getTime(),
      radioValue: '1',
      ifShowTimeChoose: false,
      chooseTimeType: 1,
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() < 10 ? "0" + new Date().getDate() : new Date().getDate()),
      currentDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
      beginTimeString: '开始日期',
      endTimeString: '结束日期',
      beginTime: '',
      endTime: '',
    };
  },
  methods: {
    chooseTime(type) {
      if (this.radioValue === '991') {
        this.chooseTimeType = type
        this.ifShowTimeChoose = true
      }
    },
    onConfirm() {
      const year = this.currentDate.getFullYear()
      const month = this.currentDate.getMonth() + 1
      const day = this.currentDate.getDate() < 10 ? "0" + this.currentDate.getDate() : this.currentDate.getDate()
      const timeString = year + '年' + month + '月' + day + '日'
      const timeValue = year + '-' + month + '-' + day
      switch (this.chooseTimeType) {
        case 1:
          this.beginTime = timeValue
          this.beginTimeString = timeString
          break
        case 2:
          this.endTime = timeValue
          this.endTimeString = timeString
          break
      }
      this.onCancel()
    },
    onCancel() {
      this.ifShowTimeChoose = false
    },
    getTimePeriod() {
      let _beginTime = this.beginTime
      let _endTime = this.endTime
      if (!_beginTime) {
        _beginTime = '2020-1-1'
      }
      if (!_endTime) {
        const _date = new Date()
        const year = String(_date.getFullYear())
        const month = String(_date.getMonth() + 1)
        const day = _date.getDate() < 10 ? '0' + _date.getDate() : _date.getDate()
        _endTime = year + '-' + month + '-' + day
      }
      return [_beginTime, _endTime]
    },
    setValue(value) {
      this.radioValue = value
      this.radioKey = new Date().getTime()
    },
    change(value) {
      if (value === '1' || value === '2') {
        this.$emit('radioSelectEvent', value)
      } else {
        if (value === '991' || value === '992') {
          this.beginTime = ''
          this.endTime = ''
        }
      }

    },
  },
};
</script>

<style scoped>
.radio-item {
  height: 24px;
  margin-top: 12px;
}

.pop-content-select {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.pop-content-select-part {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 168px;
  height: 42px;
  padding: 12px 12px 8px;
  margin: 0 8px;
  background: #F5F5F5;
  border-radius: 4px;
}

.pop-content-select-part > span {
  width: 120px;
}
</style>